<template>
  <section class="xmv-button xmv-wrap">
    <h4>上传图片</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <button type="button" class="c-button" @click="openOCR">Button</button>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltxm-upload :IdCard="showOCR.IdCard" v-if="showOCR.IdCard" @closeOCR="closeOCR" @fileChange="fileChange" :kind1="true"&gt&lt/xm-upload&gt

export default {
  data() {
    return {
      value: null,
      showOCR: {
        IdCard: false,
        Drivinglicense: false
      }
    };
  },
  methods: {
    openOCR() {
      this.showOCR.IdCard = true;
    },
    closeOCR() {
      this.showOCR.IdCard = false;
    },
    fileChange(e, type) {
      const files = e.target.files;
      if (!files) {
        return;
      }
      this.uploadFiles(files, type);
    },
    uploadFiles(files, type) {
      let postFiles = Array.prototype.slice.call(files);
      if (!this.multiple) postFiles = postFiles.slice(0, 1);

      if (postFiles.length === 0) return;
      postFiles.forEach((file) => {
        if (!/\/(?:jpeg|jpg|png|gif|bmp)/i.test(file.type)) return;
        this.upload(file, type);
      });
    },
    upload(file, type) {
      // 判断调用接口开始
      this.showOCR.IdCard = false;
      this.$toast("上传成功");
    }
  }
};
        </code>
      </pre>
    </div>
    <xm-upload :IdCard="showOCR.IdCard" v-if="showOCR.IdCard" @closeOCR="closeOCR" @fileChange="fileChange" :kind1="true"></xm-upload>
  </section>
</template>
<script>
export default {
  data() {
    return {
      value: null,
      showOCR: {
        IdCard: false,
        Drivinglicense: false
      }
    };
  },
  methods: {
    openOCR() {
      this.showOCR.IdCard = true;
    },
    closeOCR() {
      this.showOCR.IdCard = false;
    },
    fileChange(e, type) {
      const files = e.target.files;
      if (!files) {
        return;
      }
      this.uploadFiles(files, type);
    },
    uploadFiles(files, type) {
      let postFiles = Array.prototype.slice.call(files);
      if (!this.multiple) postFiles = postFiles.slice(0, 1);

      if (postFiles.length === 0) return;
      postFiles.forEach((file) => {
        if (!/\/(?:jpeg|jpg|png|gif|bmp)/i.test(file.type)) return;
        this.upload(file, type);
      });
    },
    upload(file, type) {
      // 判断调用接口开始
      this.showOCR.IdCard = false;
      this.$toast("上传成功");
    }
  }
};
</script>

<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>